<template>
  <div class="menuType">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>分类列表</span>
        <el-button type="success" icon="el-icon-plus" class="addBtn" @click="addMenuType">新增</el-button>
      </div>

      <!--      搜索-->
      <div class="nav">
        <el-input placeholder="请输入内容" v-model="keyWord" class="input-with-select" clearable>
          <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
        </el-input>
      </div>

      <!--      列表-->
      <el-table :data="menuTypeList" style="width: 100%">
        <el-table-column prop="title" label="分类名称" align="left" class-name="title"/>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-edit" size="mini" @click="editMenuType(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeMenuType(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--      分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

      <!--      弹出框-->
      <el-dialog :title="title" :visible.sync="dialogTableVisible" width="500px" @close="cancel">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="分类名称" prop="title">
            <el-input v-model="form.title"/>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="cancel" type="danger">取 消</el-button>
          <el-button type="success" @click="submit">确 定</el-button>
        </div>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
  import {
    addMenuType,
    getMenuTypeDetails,
    getMenuType,
    editMenuType,
    deleteMenuType
  } from '../../api/api'
  import {BASE_URL} from "../../settings"

  export default {
    name: "menuType",
    data() {
      return {
        BASE_URL,
        keyWord: '',  //关键词
        pageNum: 1,  //当前页数
        pageSize: 5,  //显示数量
        total: 10,//总条数
        dialogTableVisible: false,  //弹出框
        title: '',  //弹框标题
        form: {},  //表单
        menuTypeList: [],  //菜单分类列表
        rules: {
          title: [{required: true, message: '请输入分类名', trigger: 'blur'}],
        },  //表单验证
      }
    },
    methods: {
      //获取菜单分类
      async getList() {
        const res = await getMenuType({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          keyWord: this.keyWord
        })
        this.menuTypeList = res.data.list
        this.total = res.data.total
      },
      //条数改变
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.getList()
      },
      //页数改变
      handleCurrentChange(pageNum) {
        this.pageNum = pageNum
        this.getList()
      },
      //删除商品
      removeMenuType(row) {
        this.$confirm('确定删除当前分类么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await deleteMenuType({id: row._id})
          this.$message.success(res.msg)
          this.getList()
        }).catch(() => this.$message.info('取消删除'))
      },
      //添加菜单
      addMenuType() {
        this.title = '添加分类'
        this.dialogTableVisible = true
      },
      //修改菜单
      async editMenuType(row) {
        this.title = '修改分类'
        const res = await getMenuTypeDetails({id: row._id})
        this.form = res.data
        this.dialogTableVisible = true
      },
      //提交表单
      submit() {
        this.$refs.form.validate(async valid => {
          if (valid) {
            let res
            if (this.form._id) res = await editMenuType(this.form)
            else res = await addMenuType(this.form)
            this.$message.success(res.msg)
            this.dialogTableVisible = false
            this.reset()
            this.getList()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      //取消表单
      cancel() {
        this.reset()
        this.fileList = []
        this.dialogTableVisible = false
      },
      //重置表单
      reset() {
        this.form = {}
        this.$refs.form.resetFields()
      }
    },
    created() {
      this.getList()
    }
  }
</script>

<style scoped lang="scss">
  img {
    width: 50%;
  }

  .el-select {
    width: 100px;
  }

  .nav {
    .el-input {
      width: 300px;
    }
  }
</style>
